<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" type="text/css" href="./css/reset.css">
    <link rel="stylesheet" type="text/css" href="./css/fonts.css">
    <link rel="stylesheet" type="text/css" href="./css/public.css">
    <link rel="stylesheet" type="text/css" href="./css/header.css">
    <link rel="stylesheet" type="text/css" href="./css/home.css">
    <link rel="stylesheet" type="text/css" href="./css/page.css">
    <link rel="stylesheet" type="text/css" href="./css/footer.css">
    <link rel="stylesheet" type="text/css" href="./css/float-bar.css">
</head>
<body>
<!--页面头-->
<div class="header">
    <!--顶部广告-->
    <div class="ad-top">
        <a href="#" class="clearfix"></a>
    </div>
    <!--顶栏-->
    <div class="site-topbar">
        <div class="container">
            <!--顶栏列表-->
            <div class="topbar-list">
                <a href="#" class="clearfix">小米商城</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">MIUI</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">IOT</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">云服务</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">金融</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">有品</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">小爱开放平台</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">企业团购</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">资质证照</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">协议规则</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">下载APP</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">智能生活</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">Select Location</a>
            </div>
            <!--购物车-->
            <div class="topbar-shop">
                <a href="#" class="clearfix">
                    <i class="iconfont">&#xe607;</i>
                    购物车（0）
                </a>
            </div>
            <!--用户登录、注册-->
            <div class="topbar-usr">
                <a href="#" class="clearfix">登录</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">注册</a>
                <span class="sep">|</span>
                <a href="#" class="clearfix">消息通知</a>
            </div>
        </div>
    </div>
    <!--导航栏-->
    <div class="site-header">
        <div class="container">
            <!--小米图标-->
            <div class="header-logo">
                <a href="#" title="小米官网">
                    <img src="./image/logo.png">
                </a>
            </div>
            <!--导航栏列表-->
            <div class="header-list">
                <ul>
                    <li class="header-list-all">
                        <a href=""></a>
                        <div class="list-all">
                            <ul>
                                <li>
                                    <a href="#" class="clearfix">
                                        手机 电话卡
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        电视 盒子
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        笔记本 显示器
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        家电插线板
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        出行 穿戴
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        智能 路由器
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        电源 配件
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        健康 儿童
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        耳机 音箱
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="clearfix">
                                        生活 箱包
                                        <i class="list-all-icon iconfont">&#xe61b;</i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>小米手机</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>Redmi手机</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>电视</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>笔记本</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>家电</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>路由器</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>智能硬件</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <span>社区</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--搜索栏-->
            <div class="header-search">
                <form>
                    <a href="#" class="clearfix">
                        <input type="text" name="" class="search-text" placeholder="小米10">
                        <input type="submit" name="" class="search-logo iconfont" value="&#xe67e;">
                    </a>
                </form>
            </div>
        </div>
    </div>
</div>
<!--页面产品汇总-->
<div class="home">
    <div class="container">
        <!--轮播图-->
        <div class="swiper-wall clearfix">
            <a href="#" class="clearfix">
                <img src="./image/swiper-wall.jpg">
                <i class="left-icon iconfont">&#xe61c;</i>
                <i class="right-icon iconfont">&#xe61b;</i>
                <ul>
                    <li class="tab-active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </a>
        </div>
        <!--子选项-->
        <div class="home-sub clearfix">
            <!--频道列表-->
            <div class="channel-list clearfix">
                <ul>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/sub1.png">
                            <p>小米秒杀</p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/sub2.png">
                            <p>企业团购</p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/sub3.png">
                            <p>F码通道</p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/sub4.png">
                            <p>米粉卡</p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/sub5.png">
                            <p>以旧换新</p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/sub6.png">
                            <p>话费充值</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!--促销列表-->
            <div class="promo-list clearfix">
                <ul>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/promo1.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/promo2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <img src="./image/promo3.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--页面产品展示-->
<div class="page">
    <div class="container">
        <!--小米闪购-->
        <div class="box">
            <div class="box-head clearfix">
                <h2 class="title">小米闪购</h2>
                <div>
                    <a href="#" class="clearfix">
                        <i class="iconfont">&#xe61c;</i>
                        <i class="iconfont">&#xe61b;</i>
                    </a>
                </div>
            </div>
            <div class="box-body clearfix">
                <div class="time-show-left">
                    <div class="round">00:00 场</div>
                    <img src="./image/Unknown">
                    <div class="desc">本场已结束</div>
                    <div class="countdown clearfix">
                        <span>00</span><i>:</i><span>00</span><i>:</i><span>00</span>
                    </div>
                </div>
                <div class="body-right time-show-right">
                    <ul class="clearfix">
                        <li class="time-show1">
                            <a href="#" class="clearfix">
                                <img src="./image/promo-right1.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="time-show2">
                            <a href="#" class="clearfix">
                                <img src="./image/promo-right2.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="time-show3">
                            <a href="#" class="clearfix">
                                <img src="./image/promo-right3.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="time-show4">
                            <a href="#" class="clearfix">
                                <img src="./image/promo-right4.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--广告位-->
        <div class="ad-wall">
            <div>
                <a href="#" class="clearfix">
                    <img src="./image/ad-wall1.jpg">
                </a>
            </div>
        </div>
        <!--手机-->
        <div class="box">
            <div class="box-head clearfix">
                <h2 class="title">手机</h2>
                <a href="#" class="clearfix">
                    查看全部
                    <i class="iconfont">&#xe61b;</i>
                </a>
            </div>
            <div class="box-body clearfix">
                <div class="body-left">
                    <ul class="clearfix">
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-left.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="body-right">
                    <ul class="clearfix">
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-right1.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-right2.jpg">
                                <h3>Redmi K30 至尊版</h3>
                                <p>120Hz弹出全面屏，天玑1000+旗舰处理器</p>
                                <p>
                                    <span>1999元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-right3.jpg">
                                <h3>腾讯黑鲨3S</h3>
                                <p>骁龙865处理器，120Hz刷新率</p>
                                <p>
                                    <span>3999元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-right4.jpg">
                                <h3>Redmi 9A</h3>
                                <p>5000mAh长循环大电量，6.53"超大护眼屏幕</p>
                                <p>
                                    <span>499元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-right5.jpg">
                                <h3> 小米10 青春版 5G </h3>
                                <p>50倍潜望式变焦 / 轻薄5G手机</p>
                                <p>
                                    <span>1899元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-right6.jpg">
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p>
                                    <span>3699元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-right7.jpg">
                                <h3> Redmi K30 Pro </h3>
                                <p>双模5G，骁龙865，弹出全面屏</p>
                                <p>
                                    <span>2699元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/phone-right8.jpg">
                                <h3> Redmi K30 Pro 变焦版 </h3>
                                <p>双模5G，骁龙865，弹出全面屏</p>
                                <p>
                                    <span>3799元起</span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--广告位-->
        <div class="ad-wall">
            <div>
                <a href="#" class="clearfix">
                    <img src="./image/ad-wall2.jpg">
                </a>
            </div>
        </div>
        <!--家电-->
        <div class="box">
            <div class="box-head clearfix">
                <h2 class="title">家电</h2>
                <ul>
                    <li class="tab-active">电视影音</li>
                    <li>热门</li>
                </ul>
            </div>
            <div class="box-body clearfix">
                <div class="body-left">
                    <ul class="clearfix">
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-left1.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-left2.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="body-right">
                    <ul class="clearfix">
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-right1.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-right2.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-right3.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-right4.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-right5.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-right6.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-right7.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <img src="./image/jiadian-right8.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <div>
                                    浏览更多
                                    <p>热门</p>
                                </div>
                                <i class="iconfont">&#xe61d;</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--广告位-->
        <div class="ad-wall">
            <div>
                <a href="#" class="clearfix">
                    <img src="./image/ad-wall3.jpg">
                </a>
            </div>
        </div>
        <!--智能-->
        <div class="box">
            <div class="box-head clearfix">
                <h2 class="title">智能</h2>
                <ul>
                    <li>安防</li>
                    <li>出行</li>
                    <li class="tab-active">热门</li>
                </ul>
            </div>
            <div class="box-body clearfix">
                <div class="body-left">
                    <ul>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-left1.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-left2.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="body-right">
                    <ul class="clearfix">
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-right1.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-right2.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-right3.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-right4.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-right5.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-right6.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/ai-right7.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <img src="./image/ai-right8.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <div>
                                    浏览更多
                                    <p>热门</p>
                                </div>
                                <i class="iconfont">&#xe61d;</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--广告位-->
        <div class="ad-wall">
            <div>
                <a href="#" class="clearfix">
                    <img src="./image/ad-wall4.jpg">
                </a>
            </div>
        </div>
        <!--搭配-->
        <div class="box">
            <div class="box-head clearfix">
                <h2 class="title">搭配</h2>
                <ul>
                    <li>音箱耳机</li>
                    <li class="tab-active">热门</li>
                </ul>
            </div>
            <div class="box-body clearfix">
                <div class="body-left">
                    <ul>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-left1.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-left2.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="body-right">
                    <ul class="clearfix">
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-right1.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-right2.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-right3.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-right4.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-right5.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-right6.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/part-right7.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <img src="./image/part-right8.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <div>
                                    浏览更多
                                    <p>热门</p>
                                </div>
                                <i class="iconfont">&#xe61d;</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--广告位-->
        <div class="ad-wall">
            <div>
                <a href="#" class="clearfix">
                    <img src="./image/ad-wall5.jpg">
                </a>
            </div>
        </div>
        <!--配件-->
        <div class="box">
            <div class="box-head clearfix">
                <h2 class="title">配件</h2>
                <ul>
                    <li>充电器</li>
                    <li class="tab-active">热门</li>
                </ul>
            </div>
            <div class="box-body clearfix">
                <div class="body-left">
                    <ul>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-left1.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-left2.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="body-right">
                    <ul class="clearfix">
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-right1.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-right2.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-right3.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-right4.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-right5.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-right6.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/fit-right7.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <img src="./image/fit-right8.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <div>
                                    浏览更多
                                    <p>热门</p>
                                </div>
                                <i class="iconfont">&#xe61d;</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--广告位-->
        <div class="ad-wall">
            <div>
                <a href="#" class="clearfix">
                    <img src="./image/ad-wall6.jpg">
                </a>
            </div>
        </div>
        <!--周边-->
        <div class="box">
            <div class="box-head clearfix">
                <h2 class="title">周边</h2>
                <ul>
                    <li>出行</li>
                    <li class="tab-active">热门</li>
                </ul>
            </div>
            <div class="box-body clearfix">
                <div class="body-left">
                    <ul>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-left1.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-left2.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="body-right">
                    <ul class="clearfix">
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-right1.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-right2.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-right3.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-right4.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-right5.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-right6.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="clearfix">
                                <img src="./image/round-right7.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <img src="./image/round-right8.jpg">
                                <h3>小米10 至尊版</h3>
                                <p>
                                    <span>5299元起</span>
                                </p>
                            </a>
                        </li>
                        <li class="right-last">
                            <a href="#" class="clearfix">
                                <div>
                                    浏览更多
                                    <p>热门</p>
                                </div>
                                <i class="iconfont">&#xe61d;</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--广告位-->
        <div class="ad-wall">
            <div>
                <a href="#" class="clearfix">
                    <img src="./image/ad-wall7.jpg">
                </a>
            </div>
        </div>
        <!--视频-->
        <div class="box">
            <div class="box-head clearfix">
                <h2 class="title">视频</h2>
                <a href="#" class="clearfix">
                    查看全部
                    <i class="iconfont">&#xe61b;</i>
                </a>
            </div>
            <div class="box-body clearfix clearfix">
                <ul class="video-list clearfix">
                    <li>
                        <a href="#" class="clearfix">
                            <div class="video-action">
                                <img src="./image/movie1.jpg">
                                <i class="iconfont">&#xe616;</i>
                            </div>
                            <h3 class="title">Redmi 10X系列发布会</h3>
                            <p class="desc">Redmi 10X系列发布会</p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <div class="video-action">
                                <img src="./image/movie2.jpg">
                                <i class="iconfont">&#xe616;</i>
                            </div>
                            <h3 class="title"> 小米10 青春版 发布会 </h3>
                            <p class="desc"> 小米10 青春版 发布会 </p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <div class="video-action">
                                <img src="./image/movie3.jpg">
                                <i class="iconfont">&#xe616;</i>
                            </div>
                            <h3 class="title"> 小米10 8K手机拍大片 </h3>
                            <p class="desc"> 小米10 8K手机拍大片 </p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <div class="video-action">
                                <img src="./image/movie4.jpg">
                                <i class="iconfont">&#xe616;</i>
                            </div>
                            <h3 class="title"> 小米10发布会 </h3>
                            <p class="desc"> 小米10发布会 </p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--页面脚-->
<div class="footer">
    <!--网页脚-->
    <div class="site-footer">
        <div class="container">
            <!--服务列表-->
            <div class="footer-service clearfix">
                <ul>
                    <li class="first">
                        <a href="#" class="clearfix">
                            <i class="iconfont">&#xe69f;</i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <i class="iconfont">&#xe61f;</i>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <i class="iconfont">&#xe606;</i>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <i class="iconfont">&#xe60b;</i>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#" class="clearfix">
                            <i class="iconfont">&#xe65f;</i>
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <!--链接列表-->
            <div class="footer-links clearfix">
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <a href="#" class="clearfix">账户管理</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">购物指南</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">订单操作</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd>
                        <a href="#" class="clearfix">售后政策</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">自助服务</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">相关下载</a>
                    </dd>
                </dl>
                <dl>
                    <dt>线下门店</dt>
                    <dd>
                        <a href="#" class="clearfix">小米之家</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">服务网点</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">授权体验店</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关于小米</dt>
                    <dd>
                        <a href="#" class="clearfix">了解小米</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">加入小米</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">投资者关系</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">企业社会责任</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">廉洁举报</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd>
                        <a href="#" class="clearfix">新浪微博</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">官方微信</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">联系我们</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">公益基金会</a>
                    </dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd>
                        <a href="#" class="clearfix">F码通道</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">礼物码</a>
                    </dd>
                    <dd>
                        <a href="#" class="clearfix">防伪查询</a>
                    </dd>
                </dl>
                <div class="contact">
                    <p class="phone">400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#" class="btn iconfont">
                        &#xe67b;人工客服
                    </a>
                    <div>
                        关注小米：
                        <a href="#" class="iconfont">&#xe608;</a>
                        <a href="#" class="iconfont">&#xe62c;</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--slogan-->
    <div class="slogan"></div>
</div>
<!--侧边悬浮栏-->
<div class="float-bar">
    <a href="#" class="iconfont">
        &#xe615;
    </a>
    <a href="#" class="iconfont">
        &#xe61e;
    </a>
    <a href="#" class="iconfont">
        &#xe69f;
    </a>
    <a href="#" class="iconfont">
        &#xe622;
    </a>
    <a href="#" class="iconfont">
        &#xe607;
    </a>
    <a href="#" class="iconfont">
        &#xe6a9;
    </a>
</div>
</body>
</html>



